<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="__ROOT__/static/admin/css/images.css">
    <script type="text/javascript" src="__ROOT__/static/plugins/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="__ROOT__/static/plugins/layer/layer.min.js"></script>
</head>
<body>
    <div class="up_outer">
        <img id="tag_img" src=""/>
        <div class="img_msg">
            <ul>
                <li><b style="color: rgba(255,0,0,0.5);font-size: 13px;">&emsp;只支持以下图片格式</b><i>&nbsp;上传图片类型(jpeg/png/gif)：<span id="img_type"></span></i></li>
                <li><b style="color: rgba(255,0,0,0.5);font-size: 13px;">&emsp;图片不能超过300(kb)</b><i>&nbsp;上传图片大小(kb)：<span id="img_size"></span></i></li>
                <li><b style="color: rgba(255,0,0,0.5);font-size: 13px;">&emsp;图片宽度范围(750-1000)像素</b><i>&nbsp;上传图片宽度(像素)：<span id="img_width"></span></i></li>
                <li><b style="color: rgba(255,0,0,0.5);font-size: 13px;">&emsp;图片高度范围(300-500)像素</b><i>&nbsp;上传图片高度(像素)：<span id="img_height"></span></i></li>
            </ul>
        </div>
        <div class="show_line"></div>
        <form id="upload" name="formImg" enctype="multipart/form-data" action="" method="post">
            <input type="hidden" id="imgSavePath" value="">
            <input type="file" name="images" id="change"/>选择图片
        </form>
        <button class="up_btn">确定上传</button>
    </div>
</body>
<script>
    $(function(){
        $("#change").bind('change',function(){
            var formData=new FormData($('#upload')[0]);
            $.ajax({
                url: "{:url('admin/Images/getReturnImg')}" ,
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (returndata) {
                    if(returndata.img_type==='image'){
                        imgUrl =returndata.img_name; //缩略图地址
                        upImgUrl = 'upload/carousel/'+imgUrl; //上传数据图片地址
                        upSize = Math.ceil(returndata.img_size/1024); //上传图片大小(kb)
                        $("#tag_img").prop('src','__ROOT__'+'/upload/carousel/'+imgUrl);
                        $("#imgSavePath").val(upImgUrl);
                        $('#img_type').html("&nbsp;"+returndata.img_suffix); //显示图片类型
                        $('#img_size').html("&emsp;&emsp;&nbsp;"+upSize+"(kb)");  //上传图片大小(kb)
                        $(document).ready(function(){
                            $("#tag_img").on("load",function(){
                                var img = $("#tag_img")[0];
                                $("#img_width").html("&emsp;&nbsp;"+img.naturalWidth+'像素');
                                $("#img_height").html("&emsp;&nbsp;"+img.naturalHeight+'像素');

                                $(".up_btn").bind('click',function(){
                                    var params={};
                                    params.imgs_url = $('#imgSavePath').val();
                                    params.img_width= img.naturalWidth;
                                    params.img_height= img.naturalHeight;
                                    params.img_size= returndata.img_size;
                                    $.post("{:url('admin/Images/addImage')}", params, function(data){
                                        if(data==1){
                                            var index = layer.load(2, {
                                                shade: [0.1,'#fff'],
                                                time:2000,
                                                area :['0px','100px']//0.1透明度的白色背景
                                            });
                                            setTimeout("layer.msg('添加图片成功')",2200);
                                            setTimeout(' window.parent.location.href="{:url(\'admin/Images/index\')}"',3000);
                                        }else if(data.width<750||data.width>1000)
                                        {
                                            layer.msg('宽度小于750或大于1000像素！',{time:1500});
                                            setTimeout('location.href="{:url(\'admin/Images/getReturnImg\')}"',1500);
                                        }else if(data.height<300||data.height>500)
                                        {
                                            layer.msg('高度小于300或大于500像素！',{time:1500});
                                            setTimeout('location.href="{:url(\'admin/Images/getReturnImg\')}"',1500);
                                        }else if(data.size>307200){
                                            layer.msg('图片大小超过200(kb)！',{time:1500});
                                            setTimeout('location.href="{:url(\'admin/Images/getReturnImg\')}"',1500);
                                        }
                                    });
                                    $(this).off('click');
                                });
                            });
                        });
                    }
                    if(returndata.img_type!=='image'){
                        layer.msg('请选择图片上传！');
                    }
                }

            });
        });
    });
</script>

</html>